<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<head>
    <meta charset="UTF-8">
    <title>全国冠状病毒实时统计</title>
    <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/css/mdui.min.css"
            integrity="sha384-cLRrMq39HOZdvE0j6yBojO4+1PrHfB7a9l5qLcmRm/fiWXYY+CndJPmyu5FV/9Tw"
            crossorigin="anonymous"
    />
    <style>
        .hdlf {
            float: left;
            width: 32%;
        }
        .hdrt {
            display: block;
            float: right;
            width: 68%;
            height: 215.38px;
            color: blue;
            margin-top: 30px;
        }

    </style>
</head>
<body class="mdui-theme-layout-dark">
<span class="hdlf">
<h1 th:text = "(${country} == null?'全国': ${country}) + '冠状病毒实时统计'"></h1>

<h1 style="color:red" th:text = "${totalReportedCases}"></h1>
<p th:text = "'截止到今日'+ (${country} == null?'全国': ${country}) + '冠状病毒总人数'"></p>
<p>当前时间：<span th:text="${#temporals.format(localDate,'yyyy-MM-dd')}"></span></p>
<p>
    <span th:text="'自上一日以来的'+ (${country} == null?'全国': ${country}) + '冠状病毒增长数'"></span>
    <span style="color:red" th:text="${totalNewCases}"></span>
</p>
</span>
<div class="hdrt" id="main">
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        const myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        const option = {
            title: {
                text: '全国冠状病毒实时统计折线图',
                textStyle: {
                    color: 'blue'
                }
            },
            tooltip: {},
            legend: {
                data: ['人数'],
                textStyle: {
                    color: 'blue'
                }
            },
            xAxis: {
                type: 'time',
                data: ["11.18", "11.19", "11.20", "11.21", "11.22", "11.23"],
                axisLabel:{
                    textStyle: {
                        color: 'blue'
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLabel:{
                    textStyle: {
                        color: 'blue'
                    }
                }
            },
            series: [{
                name: '人数',
                type: 'line',
                data: [30, 400,2500, 5000, 10040, 30040]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</div>
<div class="mdui-table-fluid">
<table class="mdui-table">
    <tr><th>州/省</th><th>国家</th><th>冠状病毒总人数</th><th>自上一日的增长</th></tr>
    <tr class="mdui-hoverable" th:each="RegionStat:${RegionStats}">
        <td th:text="${RegionStat.state}"></td>
        <td th:text="${RegionStat.country}"></td>
        <td style="color:red" th:text="${RegionStat.latestTotalCases}"></td>
        <td style="color:red" th:text="${RegionStat.diffFromPrevDay}"></td>
    </tr>
</table>
</div>
</body>
</html>